<template>
    <section class="vh-100">
        <div class="container py-5 h-100">
            <div class="row d-flex align-items-center justify-content-center h-100">
                <div class="col-md-8 col-lg-7 col-xl-6">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
                        class="img-fluid" alt="Phone image">
                </div>
                <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
                    <!-- 登录 -->
                    <form v-show="state">
                        <!-- Email input -->
                        <div data-mdb-input-init class="form-outline mb-4" >
          
                            <a-input v-model:value="user.username" placeholder="请输入账号" size="large">
                                <template #addonBefore>
                                   账号:
                                </template>
                            </a-input>
                        </div>

                        <!-- Password input -->
                        <div data-mdb-input-init class="form-outline mb-4" >
                            <a-input v-model:value="user.password" placeholder="请输入密码" size="large">
                                <template #addonBefore>
                                   密码:
                                </template>
                            </a-input>
                        </div>

                        <div class="d-flex justify-content-around align-items-center mb-4">
                      
                            <div class="form-check">
                        
                                <a-checkbox v-model:checked="Remember">记住我</a-checkbox>
                            </div>
                            <!-- <a @click="changeState">忘记密码?</a> -->
                            <a-button type="text" @click="changeState">忘记密码?</a-button>
                        </div>

                        <!-- Submit button -->
                        <div class=" d-flex align-items-center my-12">
                            <a-button type="primary" size="large" block>登录</a-button>
                        </div>
                            
                        <div class="divider d-flex align-items-center my-4">
                            <p class="text-center fw-bold mx-3 mb-0 text-muted">其他登录项</p>
                        </div>

                        <!-- <a data-mdb-ripple-init class="btn btn-primary btn-lg btn-block"
                            style="background-color: #3b5998" href="#!" role="button">
                            <i class="fab fa-facebook-f me-2"></i>Continue with Facebook
                        </a>

                        <a data-mdb-ripple-init class="btn btn-primary btn-lg btn-block"
                            style="background-color: #55acee" href="#!" role="button">
                            <i class="fab fa-twitter me-2"></i>Continue with Twitter</a> -->

                    </form>
                    <!-- 注册 -->
                    <form v-show="!state">
                        <!-- Email input -->
                        <div data-mdb-input-init class="form-outline mb-4" >
          
                            <a-input v-model:value="user.username" placeholder="请输入账号" size="large">
                                <template #addonBefore>
                                   账号:
                                </template>
                            </a-input>
                        </div>

                        <!-- Password input -->
                        <div data-mdb-input-init class="form-outline mb-4" >
                            <a-input v-model:value="user.password" placeholder="请输入密码" size="large">
                                <template #addonBefore>
                                   密码:
                                </template>
                            </a-input>
                        </div>
                        <div data-mdb-input-init class="form-outline mb-4" >
                            <a-input v-model:value="user.password" placeholder="请输入密码" size="large">
                                <template #addonBefore>
                                   确认密码:
                                </template>
                            </a-input>
                        </div>
                        <div class="d-flex justify-content-around align-items-center mb-4">
                      
                            <!-- <div class="form-check">
                        
                                <a-checkbox v-model:checked="Remember">记住我</a-checkbox>
                            </div> -->
                            <!-- <a @click="changeState">去登录</a> -->
                            <a-button type="text"  @click="changeState">去登录</a-button>
                        </div>

                        <!-- Submit button -->
                        <div class=" d-flex align-items-center my-12">
                            <a-button type="primary" size="large" block>注册</a-button>
                        </div>
                            
                        <div class="divider d-flex align-items-center my-4">
                            <p class="text-center fw-bold mx-3 mb-0 text-muted">其他登录项</p>
                        </div>

                        <a data-mdb-ripple-init class="btn btn-primary btn-lg btn-block"
                            style="background-color: #3b5998" href="#!" role="button">
                            <i class="fab fa-facebook-f me-2"></i>Continue with Facebook
                        </a>

                        <a data-mdb-ripple-init class="btn btn-primary btn-lg btn-block"
                            style="background-color: #55acee" href="#!" role="button">
                            <i class="fab fa-twitter me-2"></i>Continue with Twitter</a>

                    </form>
                </div>
            </div>
        </div>
    </section>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
interface IUser {
    username: string,
    password: string
}

const user = reactive<IUser>({
    username: "",
    password: ""
})

const Remember = ref<boolean>(false)

const state = ref<boolean>(true)

const  changeState = () => {
     state.value = !state.value
}
</script>

<style>
.divider:after,
.divider:before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}
</style>